<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-row>
        <el-button type="primary" @click="handleEdit(0, '','add')">新增授权</el-button>
      </el-row>
      <br/>
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading">
        <el-table-column
          label="书名"
          prop="article.title">
        </el-table-column>

        <el-table-column
          label="地址"
          prop="url">
        </el-table-column>
        <el-table-column
          label="授权用户"
          :formatter="userFormat">
        </el-table-column>

        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteAlert( scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-size="pages.pageSize"
          layout="total, prev, pager, next"
          :total="pages.total">
        </el-pagination>
      </div>

      <el-dialog :title="dialog.title" :visible.sync="dialog.dialogFormVisible" :close-on-click-modal="dialog.close">
        <el-form :model="oauthUrl">

          <el-form-item label="数量" label-width="100px">
            <el-input-number v-model="oauthUrl.count" ></el-input-number>
          </el-form-item>


          <el-form-item label="书籍" label-width="100px">
            <el-select v-model="oauthUrl.article_id" filterable placeholder="请选择">
              <el-option
                v-for="item in articles"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { baseUrl,baseImgPath } from '../../api/env';
export default {
  data(){
    return {
      baseUrl,
      baseImgPath,
      loading:false,
      oauthUrl:{
        article_id:0,
        count:1,
      },
      dialog:{
        dialogFormVisible:false,
        title:"新增书籍",
        close:false,
      },
      pages:{
        offset: 0,
        pageSize: 10,
        page: 1,
        total: 0,
      },
      tableData: [],
      picVisible:false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      articles:[],

    }
  },
  created(){
    this.initData();
  },
  methods: {
    initData(){
      this.loading = true;
      var that = this;
      that.$api.get('/admin/oauth/urls', that.pages, response => {
        if (response.status >= 200 && response.status < 300) {
          var res = response.data;
          if (res.code == 0) {
            that.tableData = res.data.oauthUrls.content;
            that.pages.total = res.data.oauthUrls.totalElements;
          }else{
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        } else {
          this.$message({
            message: "服务器维护中",
            type: 'error'
          });
        }
        this.loading = false;
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pages.page = val;
      this.pages.offset = (val - 1)*this.pages.pageSize;
      this.initData()
    },
    userFormat(row){
        return row.user == null?'未使用':row.user.account;
    },
    handleEdit(index, row,action) {
      // 加载分组树
      this.loading = true;
      var that = this;
      that.$api.get('/admin/article', {pageSize: 10000}, response => {
        if (response.status >= 200 && response.status < 300) {
          var res = response.data;
          if (res.code == 0) {
            that.articles = res.data.articles.content;
            if(that.articles != null && that.articles.length > 0) {
              that.oauthUrl.article_id = ""+that.articles[0].id;
            }else{
              that.oauthUrl.article_id = "";
            }
            this.dialog.dialogFormVisible = true;
          }else{
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        } else {
          this.$message({
            message: "服务器维护中",
            type: 'error'
          });
        }
        this.loading = false;
      });

      this.oauthUrl.count = 1;
      this.oauthUrl.article_id = "0";


    },
    handleSave() {
      this.loading = true;
      var that = this;
      that.$api.post('/admin/oauth/urls', that.oauthUrl, response => {
        if (response.status >= 200 && response.status < 300) {
          var res = response.data;
          if (res.code == 0) {
            this.$message({
              message: that.dialog.title+'成功',
              type: 'success'
            });
            this.dialog.dialogFormVisible = false;
            this.initData();
          }else{
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        } else {
          this.$message({
            message: "服务器维护中",
            type: 'error'
          });
        }

      });

      this.loading = false;
    },
    handleDeleteAlert(row) {
      this.$confirm('此操作将删除该书籍授权链接, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(row);
      }).catch(() => {

      });
    },
    handleDelete(row) {
      this.loading = true;
      var that = this;
      that.$api.delete('/admin/oauth/urls/'+row.id, null, response => {
        if (response.status >= 200 && response.status < 300) {
          console.log(response.data);
          var res = response.data;
          if (res.code == 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.loading = false;
            this.initData();
          }else{
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        } else {
          this.$message({
            message: "服务器维护中",
            type: 'error'
          });
        }

      });
    },
  },
}
</script>

<style lang="less">
@import '../../style/mixin';
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container{
  padding: 20px;
}
.Pagination{
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
